import {uDisableReportConf, uOpenReportConf} from '@/api/alarm'
import {CCard} from '@/components/card'
import AlarmSMSConfigModalForm from '@/components/form/alarmSMSConfigModalForm'
import AlarmWXConfigModalForm from '@/components/form/alarmWXConfigModalForm'
import {DeviceStatusOfStatus, IconImg, ParamIcon} from '@/components/image'
import {CFormModal, ChangeVisible} from '@/components/modal'
import {CnBoldSpan, CnMediumSpan, CnNormalSpan} from '@/components/text'
import {iconUrl} from '@/libs/baseUrl'
import {message} from '@/libs/global/antDesignVue'
import {addressJoin} from '@/libs/toolkit'
import {PropType} from 'vue'

export const AlarmConfigMsgCard = defineComponent({
  props: {
    devConfigData: {
      type: Object as PropType<Alarm.DevConfigData>,
      required: true
    }
  },
  emits: {
    'update:visible': (visible: boolean): boolean => true,
    updateConfig: (): boolean => true
  },
  setup(props, {emit}) {
    const state = reactive<{
      alarmSMSConfigModalVisible: boolean
      alarmWXConfigModalVisible: boolean
      spinning: boolean
      smsConfigSwitch: boolean
      smsConfigSwitchLoading: boolean
      wxConfigSwitch: boolean
      wxConfigSwitchLoading: boolean
    }>({
      alarmSMSConfigModalVisible: false,
      alarmWXConfigModalVisible: false,
      spinning: false,
      smsConfigSwitch: false,
      smsConfigSwitchLoading: false,
      wxConfigSwitch: false,
      wxConfigSwitchLoading: false
    })

    const smsConfig = computed(
      () => props.devConfigData.devReportConfList.filter(item => item.devReportType === '0152')[0]
    )

    const smsConfigIsopen = computed(() => smsConfig.value.isOpen === 1)

    const wxConfig = computed(
      () => props.devConfigData.devReportConfList.filter(item => item.devReportType === '0151')[0]
    )

    const wxConfigIsopen = computed(() => wxConfig.value.isOpen === 1)

    watch(
      () => smsConfigIsopen.value,
      n => {
        state.smsConfigSwitchLoading = false
        state.smsConfigSwitch = n
      }
    )

    watch(
      () => wxConfigIsopen.value,
      n => {
        state.wxConfigSwitchLoading = false
        state.wxConfigSwitch = n
      }
    )

    function openSMSModal() {
      if (smsConfig.value && smsConfig.value.isOpen === 1) {
        state.alarmSMSConfigModalVisible = true
      } else {
        message.error({
          content: <CnNormalSpan>短信报警未开启，无法修改其配置</CnNormalSpan>
        })
      }
    }

    function openWXModal() {
      if (wxConfig.value && wxConfig.value.isOpen === 1) {
        state.alarmWXConfigModalVisible = true
      } else {
        message.error({
          content: <CnNormalSpan>微信报警未开启，无法修改其配置</CnNormalSpan>
        })
      }
    }

    function handleNoticeOpen(configType: 'WX' | 'SMS') {
      switch (configType) {
        case 'SMS':
          uOpenReportConf({
            devReportConfId: smsConfig.value.devReportConfId
          })
            .then(res => {
              emit('updateConfig')
            })
            .catch(err => {})
          break
        case 'WX':
          uOpenReportConf({
            devReportConfId: wxConfig.value.devReportConfId
          })
            .then(res => {
              emit('updateConfig')
            })
            .catch(err => {})
          break
      }
    }

    function handleNoticeCloce(configType: 'WX' | 'SMS') {
      switch (configType) {
        case 'WX':
          uDisableReportConf({devReportConfId: wxConfig.value.devReportConfId})
            .then(res => {
              emit('updateConfig')
            })
            .catch(err => {})
          break
        case 'SMS':
          uDisableReportConf({devReportConfId: smsConfig.value.devReportConfId})
            .then(res => {
              emit('updateConfig')
            })
            .catch(err => {})
          break
      }
    }

    function handleConfigSwitchChange(configType: 'WX' | 'SMS') {
      switch (configType) {
        case 'WX':
          state.wxConfigSwitchLoading = true
          if (state.wxConfigSwitch) {
            handleNoticeCloce('WX')
          } else {
            handleNoticeOpen('WX')
          }
          break
        case 'SMS':
          state.smsConfigSwitchLoading = true
          if (state.smsConfigSwitch) {
            handleNoticeCloce('SMS')
          } else {
            handleNoticeOpen('SMS')
          }
          break
      }
    }

    onMounted(() => {
      state.smsConfigSwitch = smsConfigIsopen.value
      state.wxConfigSwitch = wxConfigIsopen.value
    })
    return () => (
      <CCard
        vein={true}
        class=' bg-white relative pb-52 overflow-hidden flex flex-col px-0'
        title={'标准设置-' + props.devConfigData.devName}
        v-slots={{
          title: () => (
            <div class='w-full h-full flex justify-between items-center'>
              <div class='flex items-center gap-x-8'>
                <CnBoldSpan>{props.devConfigData.devName}</CnBoldSpan>
              </div>
              <DeviceStatusOfStatus status={props.devConfigData.devStatusCode}>
                <CnBoldSpan class='text-16'>{props.devConfigData.devStatus}</CnBoldSpan>
              </DeviceStatusOfStatus>
            </div>
          )
        }}
        spinning={state.spinning}
      >
        <div class=' px-16'>
          <div class='flex-1 mt-13 flex items-center'>
            <div class='flex-1'>
              {smsConfigIsopen.value ? (
                [
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>报警开关</CnNormalSpan>
                    {/* 
                      v-model={[state.smsConfigSwitch, 'checked']}
                     */}
                    <a-switch
                      checked={state.smsConfigSwitch}
                      loading={state.smsConfigSwitchLoading}
                      checkedChildren='已开启'
                      checkedValue={true}
                      unCheckedChildren='已关闭'
                      unCheckedValue={false}
                      onChange={() => handleConfigSwitchChange('SMS')}
                    ></a-switch>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>报警方式</CnNormalSpan>
                    <CnBoldSpan>短信报警</CnBoldSpan>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>开始时间</CnNormalSpan>
                    <CnNormalSpan>{smsConfig.value.devReportStartTime || '未设置'}</CnNormalSpan>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>结束时间</CnNormalSpan>
                    <CnNormalSpan>{smsConfig.value.devReportEndTime || '未设置'}</CnNormalSpan>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>间隔时段</CnNormalSpan>
                    <CnNormalSpan class='mr-16'>
                      {smsConfig.value.devReportIntervalTime || '未设置'}
                    </CnNormalSpan>
                    <CnNormalSpan class='text-text'>{`(小时)`}</CnNormalSpan>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>每天次数</CnNormalSpan>
                    <CnNormalSpan class='mr-16'>
                      {smsConfig.value.devReportTopLimit || '未设置'}
                    </CnNormalSpan>
                    <CnNormalSpan class='text-text'>{`(最多)`}</CnNormalSpan>
                  </div>
                ]
              ) : (
                <a-empty
                  description={<CnNormalSpan>未开启短信报警</CnNormalSpan>}
                  image={iconUrl('SMS')}
                  imageStyle={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}
                >
                  {/* 
                    v-model={[state.smsConfigSwitch, 'checked']}
                   */}
                  {/* <a-switch
                  checked={state.smsConfigSwitch}
                  loading={state.smsConfigSwitchLoading}
                  checkedChildren='已开启'
                  checkedValue={true}
                  unCheckedChildren='已关闭'
                  unCheckedValue={false}
                  onChange={() => handleConfigSwitchChange('SMS')}
                ></a-switch> */}
                </a-empty>
              )}
            </div>
            <div class='flex-1'>
              {wxConfigIsopen.value ? (
                [
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>报警开关</CnNormalSpan>
                    <a-switch
                      checked={state.wxConfigSwitch}
                      loading={state.wxConfigSwitchLoading}
                      checkedChildren='已开启'
                      checkedValue={true}
                      unCheckedChildren='已关闭'
                      unCheckedValue={false}
                      onChange={() => handleConfigSwitchChange('WX')}
                    ></a-switch>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>报警方式</CnNormalSpan>
                    <CnBoldSpan>微信报警</CnBoldSpan>
                  </div>,

                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>开始时间</CnNormalSpan>
                    <CnNormalSpan>{wxConfig.value.devReportStartTime || '未设置'}</CnNormalSpan>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>结束时间</CnNormalSpan>
                    <CnNormalSpan>{wxConfig.value.devReportEndTime || '未设置'}</CnNormalSpan>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>间隔时段</CnNormalSpan>
                    <CnNormalSpan class='mr-16'>
                      {wxConfig.value.devReportIntervalTime || '未设置'}
                    </CnNormalSpan>
                    <CnNormalSpan class='text-text'>{`(小时)`}</CnNormalSpan>
                  </div>,
                  <div class='h-42 flex items-center'>
                    <CnNormalSpan class='text-text mr-52'>每天次数</CnNormalSpan>
                    <CnNormalSpan class='mr-16'>
                      {wxConfig.value.devReportTopLimit || '未设置'}
                    </CnNormalSpan>
                    <CnNormalSpan class='text-text'>{`(最多)`}</CnNormalSpan>
                  </div>
                ]
              ) : (
                <a-empty
                  description={<CnNormalSpan>未开启微信报警</CnNormalSpan>}
                  image={iconUrl('wechat')}
                  imageStyle={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}
                >
                  {/* <a-switch
                  checked={state.wxConfigSwitch}
                  loading={state.wxConfigSwitchLoading}
                  checkedChildren='已开启'
                  checkedValue={true}
                  unCheckedChildren='已关闭'
                  unCheckedValue={false}
                  onChange={() => handleConfigSwitchChange('WX')}
                ></a-switch> */}
                </a-empty>
              )}
            </div>
          </div>

          <div class='w-full flex justify-end items-center my-16'>
            <CnNormalSpan class='text-5xText mr-16'>
              {addressJoin({province: '', city: '', district: ''})}
            </CnNormalSpan>
            <CnNormalSpan class='text-xText'>{'我的设备'}</CnNormalSpan>
          </div>

          <div
            class='w-full h-52 absolute bottom-0 left-0 flex justify-end items-center'
            style={{
              backgroundColor: '#E4EAF5'
            }}
          >
            <div class='w-full flex justify-between items-center cursor-pointer'>
              <div class='flex-1 flex justify-center items-center'>
                <IconImg imgName='edit-content' class='w-24 h-24 mr-12'></IconImg>
                {smsConfigIsopen.value ? (
                  <CnMediumSpan class='text-primary' onClick={openSMSModal}>
                    短信报警设置
                  </CnMediumSpan>
                ) : (
                  <CnMediumSpan class='text-primary' onClick={() => handleNoticeOpen('SMS')}>
                    开启短信报警
                  </CnMediumSpan>
                )}
              </div>
              <div class='flex-1 flex justify-center items-center'>
                <IconImg imgName='edit-content' class='w-24 h-24 mr-12'></IconImg>
                {wxConfigIsopen.value ? (
                  <CnMediumSpan class='text-primary ' onClick={openWXModal}>
                    微信报警设置
                  </CnMediumSpan>
                ) : (
                  <CnMediumSpan class='text-primary mr-24' onClick={() => handleNoticeOpen('WX')}>
                    开启微信报警
                  </CnMediumSpan>
                )}
              </div>
            </div>
          </div>
        </div>

        <CFormModal
          class='w-400'
          v-model={[state.alarmSMSConfigModalVisible, 'visible']}
          title={`短信报警配置修改`}
        >
          {{
            default: (changeVisible: ChangeVisible) => (
              <AlarmSMSConfigModalForm
                changeVisible={changeVisible}
                config={smsConfig.value}
                onFinish={() => emit('updateConfig')}
              ></AlarmSMSConfigModalForm>
            )
          }}
        </CFormModal>

        <CFormModal
          class='w-400'
          v-model={[state.alarmWXConfigModalVisible, 'visible']}
          title={`微信报警配置修改`}
        >
          {{
            default: (changeVisible: ChangeVisible) => (
              <AlarmWXConfigModalForm
                changeVisible={changeVisible}
                config={wxConfig.value}
                onFinish={() => emit('updateConfig')}
              ></AlarmWXConfigModalForm>
            )
          }}
        </CFormModal>
      </CCard>
    )
  }
})
